<template>
  <view class="container">
    <!-- 背景 -->
    <view class="background">
      <view class="bg-gradient"></view>
      <view class="bg-blur-1"></view>
      <view class="bg-blur-2"></view>
    </view>

    <!-- 状态栏 -->
    <view class="status-bar">
      <view class="time">9:41</view>
      <view class="right-icons">
        <view class="signal"></view>
        <view class="wifi"></view>
        <view class="battery"></view>
      </view>
    </view>

    <!-- 内容区域 -->
    <view class="content">
      <!-- 返回按钮 -->
      <view class="back-btn" @click="handleBack">
        <uni-icons type="left" size="24" color="#000000"></uni-icons>
      </view>

      <!-- 标题区域 -->
      <view class="title-box">
        <view class="logo">
          <uni-icons type="home" size="32" color="#FFFFFF"></uni-icons>
        </view>
        <view class="title">欢迎登录 天顺路桥</view>
      </view>

      <!-- 密码输入框 -->
      <view class="input-box">
        <view class="label">密码</view>
        <view class="input-wrapper">
          <uni-easyinput
            v-model="password"
            :type="showPassword ? 'text' : 'password'"
            placeholder="请输入密码"
            :focus="isFocused"
            @focus="handleInputFocus"
            @blur="handleInputBlur"
            :clearable="true"
            @clear="clearPassword"
            class="custom-input"
          />
          <view v-if="password" class="input-actions">
            <view class="toggle-btn" @click="togglePassword">
              <uni-icons :type="showPassword ? 'eye' : 'eye-slash'" size="20" color="#999999"></uni-icons>
            </view>
          </view>
        </view>
        <view class="line" :class="{ active: isFocused }"></view>
      </view>

      <!-- 登录按钮 -->
      <view class="login-btn" :class="{ active: password.length > 0 }" @click="handleLogin">
        <uni-icons type="right" size="20" color="#FFFFFF" style="margin-right: 10rpx;"></uni-icons>
        <text>登录</text>
      </view>
    </view>

    <!-- 底部指示器 -->
    <view class="home-indicator"></view>

    <!-- 隐私协议弹窗 -->
    <uni-popup ref="privacyPopup" type="center" :mask-click="false">
      <view class="modal-content">
        <text class="modal-title">用户服务协议和隐私政策</text>
        <text class="modal-text">XXXXXXXXXXXXX有限公司（下文简称"XXXXXX"、"我们"和"我们的"）深知隐私对您的重要性，并会尊重您的隐私。《用户服务协议和隐私政策》（以下简称"协议"、"本政策"）及其条款，系统立您与XXXXX之间就下载、安装和使用该软件（以下简称"本软件"或"本应用"）所订立的，描述您与本应用之间权利义务的协议。本政策适用于本公司"XXXX"的产品。</text>
        
        <view class="agreement-row">
          <uni-data-checkbox
            v-model="isAgreed"
            :localdata="[{value: true, text: ''}]"
            mode="list"
            class="custom-checkbox"
          />
          <text class="agreement-text">我已阅读以上协议</text>
        </view>

        <view class="modal-btn" :class="{ active: isAgreed }" @click="handleAgree">
          <text>同意并继续</text>
        </view>
      </view>
    </uni-popup>
  </view>
</template>

<script>
export default {
  data() {
    return {
      password: '',
      isFocused: false,
      showPassword: false,
      isAgreed: false
    }
  },
  onLoad(options) {
    if (options.account) {
      this.account = options.account
    }
  },
  methods: {
    handleBack() {
      uni.navigateBack()
    },
    handleLogin() {
      if (!this.password) {
        uni.showToast({
          title: '请输入密码',
          icon: 'none'
        })
        return
      }
      // 显示隐私协议弹窗
      this.$refs.privacyPopup.open()
    },
    handleInputFocus() {
      this.isFocused = true
      console.log('输入框获得焦点')
    },
    handleInputBlur() {
      this.isFocused = false
      console.log('输入框失去焦点')
    },
    togglePassword() {
      this.showPassword = !this.showPassword
    },
    clearPassword() {
      this.password = ''
    },
    handleAgree() {
      if (!this.isAgreed) {
        uni.showToast({
          title: '请先阅读并同意协议',
          icon: 'none'
        })
        return
      }
      // 关闭弹窗
      this.$refs.privacyPopup.close()
      // 跳转到审批页面
      uni.reLaunch({
        url: '/pages/metering/index',
        success: () => {
          console.log('跳转成功')
        },
        fail: (err) => {
          console.error('跳转失败', err)
        }
      })
    }
  }
}
</script>

<style>
.container {
  flex: 1;
  background-color: #F2F4FA;
}

.background {
  position: absolute;
  width: 750rpx;
  height: 1624rpx;
}

.bg-gradient {
  position: absolute;
  width: 750rpx;
  height: 1624rpx;
  background: linear-gradient(180deg, #F2F4FA -3%, #F9FCFB 100%);
}

.bg-blur-1 {
  position: absolute;
  width: 642rpx;
  height: 642rpx;
  left: -236rpx;
  top: -150rpx;
  background: rgba(156, 210, 255, 0.18);
  filter: blur(217.46rpx);
  border-radius: 50%;
}

.bg-blur-2 {
  position: absolute;
  width: 554rpx;
  height: 554rpx;
  left: 376rpx;
  top: -140rpx;
  background: linear-gradient(134deg, rgba(193, 165, 250, 0.18) 15%, rgba(156, 210, 255, 0.09) 37%, rgba(156, 210, 255, 0.18) 77%);
  filter: blur(81.54rpx);
  border-radius: 50%;
}

.status-bar {
  height: 88rpx;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  padding: 0 32rpx;
}

.time {
  font-size: 34rpx;
  font-family: "Alibaba PuHuiTi 2.0";
  font-weight: 600;
  color: #010101;
}

.right-icons {
  flex-direction: row;
  align-items: center;
}

.signal {
  width: 36rpx;
  height: 24rpx;
  margin-right: 8rpx;
}

.wifi {
  width: 34rpx;
  height: 24rpx;
  margin-right: 8rpx;
}

.battery {
  width: 55rpx;
  height: 26rpx;
}

.content {
  position: relative;
  flex: 1;
  padding: 0 32rpx;
  align-items: center;
}

.back-btn {
  width: 48rpx;
  height: 48rpx;
  margin-top: 20rpx;
  margin-bottom: 40rpx;
  align-self: flex-start;
  display: flex;
  align-items: center;
  justify-content: center;
}

.title-box {
  flex-direction: row;
  align-items: center;
  margin-bottom: 128rpx;
  margin-top: 100rpx;
  margin-left: 32rpx;
  align-self: flex-start;
}

.logo {
  width: 64rpx;
  height: 64rpx;
  background-color: #4980FF;
  border-radius: 12rpx;
  margin-right: 20rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}

.title {
  font-size: 56rpx;
  font-family: "Alibaba PuHuiTi 2.0";
  font-weight: 600;
  color: rgba(0, 0, 0, 0.85);
}

.input-box {
  margin-bottom: 120rpx;
  width: 622rpx;
}

.label {
  font-size: 40rpx;
  font-family: "Alibaba PuHuiTi 2.0";
  font-weight: 500;
  color: rgba(0, 0, 0, 0.85);
  margin-bottom: 20rpx;
}

.input-wrapper {
  flex-direction: row;
  align-items: center;
  position: relative;
}

.custom-input {
  flex: 1;
}

.custom-input :deep(.uni-easyinput__content) {
  background-color: transparent !important;
  border: none !important;
  padding: 0 !important;
}

.custom-input :deep(.uni-easyinput__content-input) {
  font-size: 32rpx;
  font-family: "Alibaba PuHuiTi 2.0";
  color: rgba(0, 0, 0, 0.45);
  height: 80rpx;
  background-color: transparent !important;
}

.custom-input :deep(.uni-easyinput__content-input:not(:placeholder-shown)) {
  color: rgba(0, 0, 0, 0.85);
}

.input-actions {
  position: absolute;
  right: 0;
  flex-direction: row;
  align-items: center;
}

.toggle-btn {
  width: 40rpx;
  height: 40rpx;
  justify-content: center;
  align-items: center;
  display: flex;
}

.line {
  height: 2rpx;
  background-color: #C9CDD4;
}

.line.active {
  background-color: #4980FF;
}

.login-btn {
  width: 622rpx;
  height: 90rpx;
  background-color: #C9CDD4;
  border-radius: 94rpx;
  justify-content: center;
  align-items: center;
  display: flex;
}

.login-btn.active {
  background-color: #4980FF;
}

.login-btn text {
  font-size: 34rpx;
  font-family: "Alibaba PuHuiTi 2.0";
  font-weight: 500;
  color: #FFFFFF;
}

.home-indicator {
  width: 134rpx;
  height: 5rpx;
  background-color: #000000;
  border-radius: 100rpx;
  margin: 0 auto 20rpx;
}

.modal-content {
  width: 558rpx;
  height: 802rpx;
  background-color: #FFFFFF;
  border-radius: 24rpx;
  padding: 32rpx;
  display: flex;
  flex-direction: column;
}

.modal-title {
  font-size: 32rpx;
  font-family: "Alibaba PuHuiTi 2.0";
  font-weight: 600;
  color: rgba(0, 0, 0, 0.85);
  margin-bottom: 24rpx;
  text-align: center;
}

.modal-text {
  flex: 1;
  font-size: 28rpx;
  font-family: "Alibaba PuHuiTi 2.0";
  color: rgba(0, 0, 0, 0.85);
  line-height: 48rpx;
  margin-bottom: 32rpx;
}

.agreement-row {
  flex-direction: row;
  align-items: center;
  margin-bottom: 32rpx;
  display: flex;
}

.custom-checkbox {
  transform: scale(0.8);
}

.custom-checkbox :deep(.uni-data-checklist) {
  display: none;
}

.custom-checkbox :deep(.uni-data-checklist .checklist-box) {
  display: none;
}

.agreement-text {
  font-size: 28rpx;
  font-family: "Alibaba PuHuiTi 2.0";
  color: rgba(0, 0, 0, 0.85);
  margin-left: 8rpx;
}

.modal-btn {
  width: 478rpx;
  height: 88rpx;
  background-color: #C9CDD4;
  border-radius: 94rpx;
  justify-content: center;
  align-items: center;
  align-self: center;
  transition-property: background-color;
  transition-duration: 300ms;
  display: flex;
}

.modal-btn.active {
  background-color: #4980FF;
}

.modal-btn text {
  font-size: 34rpx;
  font-family: "Alibaba PuHuiTi 2.0";
  font-weight: 500;
  color: #FFFFFF;
}
</style> 